﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>In Touch Reminder</title>
    <!-- styles -->
    <link rel="stylesheet" type="text/css" href="css/ui_custom.css" />
    <link rel="stylesheet" type="text/css" href="css/font.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css" />

    <!-- scripts -->
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <!--<script src="js/phonegap.js" type="text/javascript" charset="utf-8"></script>-->
    <!--<script src="cordova.js" type="text/javascript" charset="utf-8"></script>-->

    <!-- ----------------------------------------------------------------------- -->
    <!--        RENAME HERE BEFORE MOVING TO PRODUCTION                          -->
    <!--<script src="cordova.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="cordova-2.2.0.js" type="text/javascript" charset="utf-8"></script>
    <!-- ----------------------------------------------------------------------- -->

    
    <!--<script src="js/xui.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="js/lawnchair/adaptors/LawnchairAdaptorHelpers.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/lawnchair/adaptors/DOMStorageAdaptor.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/lawnchair/adaptors/WebkitSQLiteAdaptor.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/lawnchair/Lawnchair.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/dsl.js" type="text/javascript" charset="utf-8"></script>


    <script src="js/app/function_min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="js/app/globals.js"></script>
    <script type="text/javascript" src="js/app/dataServiceLocal.js"></script>
    <script type="text/javascript" src="js/app/deviceService.js"></script>
    <script type="text/javascript" src="js/app/contactService.js"></script>
    <script src="js/app/contacts.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">

       // Wait for Cordova to load
       //
       document.addEventListener("deviceready", onDeviceReady, false);

       // Cordova is ready
       //
       function onDeviceReady() {
           Page_Contact.fn_init();

           /* first 1st method */
           //$('#contactList li').click(function () {
           //    $('#customDialog').dialog('open');
           //    return false;
           //});


           /* second 2nd method */
           //$('.cdetails').bind('click', function(e) {
           //        e.preventDefault();
           //        $("#customDialog")
           //            .data('link', this)  // The important part .data() method
           //            .dialog('open');
           //    });


           $('.cdetails').click(function(e){
               e.preventDefault();
               $.ajax({
                   url: 'contactDetails.html',
                   type: 'GET',
                   data: ({ customer: $(this).attr("href")}), //send some unique piece of data like the ID to retrieve the corresponding user information
                   success: function(data){
                           //construct the data however, update the HTML of the popup div 
                       $('#customDialog').html(data);
                       $('#customDialog').dialog('open');
                   }    //end success
               }); //end ajax
           });  //end click


           //getContacts();
       }

       // onSuccess: Get a snapshot of the current contacts
       ////
       //function onSuccess(contacts) {
       //    for (var i = 0; i < contacts.length; i++) {
       //        alert(contacts[i].displayName);
       //    }
       //};

       //// onError: Failed to get the contacts
       ////
       //function onError(contactError) {
       //    alert('onError!');
       //}

       //var getContacts = function () {
       //    // specify contact search criteria
       //    var options = new ContactFindOptions();
       //    //options.filter = "";          // empty search string returns all contacts
       //    //options.multiple = true;      // return multiple results
       //    //filter = ["displayName"];   // return contact.displayName field

       //    //// find contacts
       //    //navigator.contacts.find(filter, onSuccess, onError, options);
       //}
      

    </script>

        <style type="text/css">
.glyph {
		display: inline-block;
		text-align: center;
		padding: .75em;
		margin: .75em 1em .75em 1em;
		width: 38px;
	}
		.fs1 {
		font-size: 2em;
	}
	.widget [class*="icos-"] { float: none; }
</style>
</head>
<body>

    <!-- Top line begins -->
    <div id="top">
        <div class="wrapper">
            <a href="index.html" title="" class="logo">
                <img src="images/logo.png" alt="" /></a>

            <!-- Right top nav -->
            <div class="topNav">
                <h2>
                    <span class="title">Contacts</span></h2>
                <div class="clear"></div>
            </div>
        </div>
        <!-- Top line ends -->

        <div class="modified_secNav">
            <div class="secWrapper">

                <!-- Tabs container -->
                <div id="tab-container" class="tab-container">

                    <div id="loadingContainer" style="display: none">
                        <img src="images/elements/loaders/10.gif" />
                        <div id="loadingMessage"></div>
                    </div>

                    <div id="customDialog" title="Dialog with other custom elements" style="z-index: 999999">


                        <!--<table cellpadding="0" cellspacing="0" width="100%" class="tDefault checkAll tMedia" id="checkAll">-->
                    </div>

                    <div id="contactsContainer">

                        <ul id="contactList" class="userList">
                        </ul>
                    </div>
                    <!-- #end general -->


                </div>
                <!--<div class="divider"><span></span></div>-->

            </div>
            <div class="clear"></div>
            <div>
            </div>
        </div>
    </div>
     <div id="bottom">
         <div>
             <ul class="middleFree">
                 <li><a href="#" title="Contacts"><span class="iconb selected" data-icon="&#xe1bb;"></span><span class="subtitle_text selected">Contacts</span></a></li>
                 <li><a href="reminders.html" title="Reminders"><span class="iconb" data-icon="&#xe023;"></span><span class="subtitle_text">Reminders</span></a></li>
                 <li><a href="settings.html" title="Settings"><span class="iconb" data-icon="&#xe04d;"></span><span class="subtitle_text">Settings</span></a></li>
                 <li><a href="more.html" title="More"><span class="iconb" data-icon="&#xe24a;"></span><span class="subtitle_text">More...</span></a></li>
             </ul>

         </div>
     </div>
</body>
</html>
